<template>
  <div class="flex-center">
    <div
      class="br8 mr24 flex-center"
      :style="{
        flex: 2.5,
        border: [-1, 1, 2, 3, 4].includes(selectTypeIndex) ? '1px solid rgba(107, 107, 242, 1)' : '1px solid transparent',
        'box-shadow': '0px 6px 16px 8px rgba(0, 0, 0, 0.03)',
        overflow: 'hidden'
      }"
    >
      <div
        class="pv28 ph32 flex-center pointer"
        :style="{
          background: selectTypeIndex === 4 ? 'rgba(0, 0, 0, 0.03)' : '#fff',
          width: 182,
          'flex-shrink': 0
        }"
        @click="setType(4)"
      >
        <div class="br8 bgc-themeA10 mr12 flex-center-between" style="width: 32px; height: 32px">
          <span class="iconfont icon-xingzhuangjiehe tc-theme fs14" />
        </div>
        <div>
          <div class="flex-center">
            <span class="mr4" style="color: rgba(118, 120, 133, 1)">电子合同</span>
            <a-popover content="电子合同=待员工签署+待公司签署+签署完成+合同过期未签署" title="">
              <span class="iconfont icon-wenhao" style="color: rgba(207, 208, 214, 1); margin-bottom: -2px; font-size: 14px" />
            </a-popover>
          </div>
          <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.allContractCount || 0 }}</div>
        </div>
      </div>
      <div style="width: 1px; height: 48px; flex-shrink: 0; background: rgba(232, 232, 232, 1)" />
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === 1 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(1)"
      >
        <div style="color: rgba(166, 168, 180, 1)">待员工签署</div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.toSignedByEmpCount || 0 }}</div>
      </div>
      <div style="width: 1px; height: 48px; flex-shrink: 0; background: rgba(232, 232, 232, 1)" />
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === 2 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(2)"
      >
        <div style="color: rgba(166, 168, 180, 1)">待公司签署</div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.toSignedByComCount || 0 }}</div>
      </div>
      <div style="width: 1px; height: 48px; flex-shrink: 0; background: rgba(232, 232, 232, 1)" />
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === 3 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(3)"
      >
        <div style="color: rgba(166, 168, 180, 1)">签署完成</div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.signedCompleteCount || 0 }}</div>
      </div>
      <div style="width: 1px; height: 48px; flex-shrink: 0; background: rgba(232, 232, 232, 1)" />
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === -1 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(-1)"
      >
        <div style="color: rgba(166, 168, 180, 1)">合同过期未签署</div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.pastCount || 0 }}</div>
      </div>
    </div>
    <div
      class="br8 flex-center"
      :style="{
        flex: 1,
        border: [5, 6].includes(selectTypeIndex) ? '1px solid rgba(107, 107, 242, 1)' : '1px solid transparent',
        'box-shadow': '0px 6px 16px 8px rgba(0, 0, 0, 0.03)',
        overflow: 'hidden'
      }"
    >
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === 5 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(5)"
      >
        <div style="color: rgba(166, 168, 180, 1); position: relative">
          即将到期
          <a-popover content="距离合同结束时间0-90天的合同" title="">
            <div
              class="iconfont icon-wenhao"
              style="color: rgba(207, 208, 214, 1); font-size: 14px; position: absolute; left: 50%; top: 1px; margin-left: 32px"
            />
          </a-popover>
        </div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.immediatelyMaturityCount || 0 }}</div>
      </div>
      <div style="width: 1px; height: 48px; flex-shrink: 0; background: rgba(232, 232, 232, 1)" />
      <div
        class="pv28 ph32 ta-center"
        :style="{ cursor: 'pointer', flex: 1, background: selectTypeIndex === 6 ? 'rgba(0, 0, 0, 0.03)' : '#fff' }"
        @click="setType(6)"
      >
        <div style="color: rgba(166, 168, 180, 1)">已到期</div>
        <div class="fs18 fw500 mt4" style="color: rgba(85, 86, 93, 1)">{{ summary.alreadyMaturityCount || 0 }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getContractCountReq } from "../api";
export default {
  name: "",
  components: {},
  mixins: [],
  props: ["selectTypeIndex"],
  data() {
    return {
      summary: {},
      loading: false
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadData();
  },
  mounted() {},
  methods: {
    loadData() {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      getContractCountReq({
        subjectId: this.$store.state.hr.companyId,
        contractType: 1
      })
        .then((res) => {
          if (res && res.data) {
            this.summary = res.data;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    setType(val) {
      this.$emit("typeChange", val);
    }
  }
};
</script>
